// 提供项目需要的工具函数，可以复用的逻辑封装这里

import { ref } from "vue";
import { useIntersectionObserver } from "@vueuse/core";

/**
 * 数据懒加载函数
 * @param {function} apiFn 调用接口的函数
 */
export const useLazyData = (apiFn) => {
    const target = ref(null);
    const list = ref([]);
    const { stop } = useIntersectionObserver(
        // 被观察的元素或组件
        target,
        async ([{ isIntersecting }]) => {
            // 是否进入可视区
            // 如果在这里发请求，isIntersecting 值为真
            if (isIntersecting) {
                stop();
                const data = await apiFn();
                list.value = data.result;
                // 如果第一次进入，发请求。停止观察
            }
        }
    );
    // 提供给模板使用
    return { target, list };
};